<template>
  <div>
    <el-card class="box-card">
      <!-- 搜索头 -->
      <p>
        <el-input v-model="facilitatorName" placeholder="请输入服务商名称" style="width:160px;border-right: 0px;"></el-input>
        <el-select v-model="facilitatorCode" placeholder="请选择厂商">
          <el-option label="全部" value="">全部</el-option>
          <el-option v-for="item in allFucture" :label="item.manufacturerName" :value="item.manufacturerCode"></el-option>
        </el-select>
        <el-select v-model="signingType" placeholder="请选择状态">
          <el-option label="全部" value="">全部</el-option>
          <el-option label="使用中" value="1">使用中</el-option>
          <el-option label="停用中" value="2">停用中</el-option>
        </el-select>
        <el-button @click="list"  icon="el-icon-search"></el-button>
      </p>
      <!-- 搜索头 -->
      <el-row :span="19" type="flex">
        <el-col>
          <el-table
              :data="listServiceForm"
              style="width: 100%;height:650px">
            <el-table-column
                prop="facilitatorCode"
                label="编号"
                width="130">
            </el-table-column>
            <el-table-column
                prop="facilitatorName"
                label="服务商名称"
                width="130">
            </el-table-column>
            <el-table-column
                prop="signingCompany"
                label="签约公司编号"
                width="130">
            </el-table-column>
            <el-table-column
                prop="facilitatorPhone"
                label="服务商电话"
                width="130">
            </el-table-column>
            <el-table-column
                label="使用状态"
                width="80">
              <template slot-scope="scope">
                <span :class="scope.row.signingType===2?'redSpan':''">{{scope.row.signingType===1?"使用中":scope.row.signingType===2?"停用中":"未签约"}}</span>
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作">
              <template slot-scope="scope">
                <el-popconfirm
                    confirm-button-text='解约'
                    cancel-button-text='取消'
                    icon="el-icon-info"
                    @confirm=terminationService(scope.row)
                    icon-color="blue"
                    title="确定将此服务商解约？">
                  <el-button slot="reference" size="small"><span>解约</span></el-button>
                </el-popconfirm>
                <el-popconfirm
                    confirm-button-text='启用'
                    cancel-button-text='取消'
                    icon="el-icon-info"
                    @confirm=openOrClose(scope.row)
                    icon-color="blue"
                    title="确定将此服务商启用？">
                  <el-button slot="reference" size="small" v-if="scope.row.signingType === 2">启用</el-button>
                </el-popconfirm>
                <el-popconfirm
                    confirm-button-text='停用'
                    cancel-button-text='取消'
                    icon="el-icon-info"
                    @confirm=openOrClose(scope.row)
                    icon-color="blue"
                    title="确定将此服务商停用？">
                  <el-button slot="reference" size="small" v-if="scope.row.signingType === 1">停用</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- 分页开始 -->
      <div class="block" style="margin-top: 20px;">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 5, 10, 20]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      pageSize:5,
      pageNum: 1,
      facilitatorCode: '',
      facilitatorName: '',
      signingType: '',
      listServiceForm: [],
      total: 0,
      currentPage: 0,
      allFucture: []
    }
  },
  mounted() {
    this.list()
    this.listFucture()
  },
  methods:{
    listFucture() {
      this.request.get('/memberZjx/manuFacturerController/allList1').then(res => {
        this.allFucture = res.data
      })
    },
    openOrClose(data) {
      this.request.get('/memberZjx/serviceProvider/openOrClose',{
        params: {
          id: data.id,
          signingType: data.signingType
        }
      }).then(res => {
        if (res){
          this.list()
          if (data.signingType == 1){
            this.myMessage('success','停用成功')
          }
          if (data.signingType == 2){
            this.myMessage('success','启用成功')
          }
        }else{
          this.myMessage('info','网络异常')
        }
      })
    },
    terminationService(data){
      this.request.delete('/memberZjx/serviceProvider/terminationService?id='+data.id).then(res => {
        if (res) {
          this.list()
          this.myMessage('success','解约成功')
        } else {
          this.myMessage('info','网络异常')
        }
      })
    },
    list(){ // 服务商全查
      this.request.get('/memberZjx/serviceProvider/list',{
        params:{
          pageSize:this.pageSize,
          pageNum: this.pageNum,
          facilitatorCode: this.facilitatorCode,
          facilitatorName: this.facilitatorName,
          signingType: this.signingType
        }
      }).then(res => {
        if (res) {
          this.listServiceForm = res.data.records
          this.total = res.data.total
        }
      })
    },
    myMessage (type, message) { // 弹窗提示
      this.$message({
        message: message,
        type: type
      })
    },
    handleSizeChange (val) { // 页码
      this.pageSize = val
      this.listEngineer()
    },
    handleCurrentChange (val) { // 页数
      this.pageNum = val
      this.listEngineer()
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    }
  }
}
</script>

<style>

.redSpan{
  color: red;
}

</style>
